<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-col :span="22" class="flex">
          <SearchForm v-model="formOption.data" :form-option="formOption" label-width="90px" />
          <el-button type="primary" style="height: 32px" @click="searchHandle">搜索</el-button>
        </el-col>
        <el-col :span="2" class="text-right">
          <el-button type="primary" @click="addTags">新建标签</el-button>
        </el-col>
      </el-row>
      <div>
        <PageTable :loading="loading" :columns="columns" :data="dataSource" />
        <Pagination
          v-show="total > 0"
          :total="total"
          :pageNo.sync="listQuery.pageNo"
          :pageSize.sync="listQuery.pageSize"
          @pagination="getAppraiseTagList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ORDER_TAGS_LEVEL } from '@/enum/order'
export default {
  name: 'OrderTags',
  data() {
    return {
      loading: false,
      formOption: {
        data: {},
        items: [
          {
            type: 'select',
            label: '标签星级',
            value: 'star',
            selectList: ORDER_TAGS_LEVEL
          },
          {
            type: 'input',
            value: 'name',
            style: {
              width: '220px'
            },
            placeholder: '请输入标签名称进行搜索'
          }
        ]
      },
      dataSource: [],
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      columns: [
        {
          label: '标签名称',
          render: (h, { row }) => {
            return <span style="color: #409eff;">{row.name}</span>
          }
        },
        {
          label: '匹配星级',
          render: (h, { row }) => {
            return <span>{this.matchStar(row.matchStar)}</span>
          }
        },
        {
          label: '是否显示',
          render: (h, { row }) => {
            return <span>{row.isShow ? '是' : '否'}</span>
          }
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {!row.isShow ? (
                  <el-button type="text" onClick={() => this.updatedStatus(row)}>
                    显示
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.updatedStatus(row)}>
                    隐藏
                  </el-button>
                )}
                <el-button type="text" onClick={() => this.editTags(row.id)}>
                  编辑
                </el-button>
                {!row.isShow ? (
                  <PopConfirm
                    text="确定删除该标签吗？"
                    confirm={() => this.deleteAppraiseTag(row.id)}
                  >
                    <el-button class="ml-10" type="text">
                      删除
                    </el-button>
                  </PopConfirm>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  computed: {
    matchStar() {
      return matchStar => {
        const data = matchStar.split(',')
        return data
          .map(item => {
            return ORDER_TAGS_LEVEL.filter(ele => {
              return item == ele.value
            }).map(item => item.label)
          })
          .flat()
          .join(',')
      }
    }
  },
  created() {
    this.getAppraiseTagList()
  },
  methods: {
    // 获取标签评价列表
    async getAppraiseTagList() {
      const params = {
        ...this.listQuery
      }
      const { star, name } = this.formOption.data
      if (star) params.star = star
      if (name) params.name = name
      this.loading = true
      const {
        data: { total, records }
      } = await this.$http.order.tagApi.getAppraiseTagList(params)
      this.total = total
      this.dataSource = records
      this.loading = false
    },
    // 搜索
    searchHandle() {
      this.listQuery.pageNo = 1
      this.getAppraiseTagList()
    },
    // 新增标签
    addTags() {
      this.$router.push({ name: 'AddTags' })
    },
    // 编辑标签
    editTags(id) {
      this.$router.push({ name: 'AddTags', query: { id } })
    },
    // 更新状态
    async updatedStatus({ id, isShow }) {
      let message = isShow ? '已隐藏' : '已显示'
      const { status, msg } = await this.$http.order.tagApi.updatedStatus({ id, isShow: !isShow })
      if (status === 200) {
        this.$message.success(message)
        this.getAppraiseTagList()
      } else {
        this.$message.error(msg)
      }
    },
    // 删除
    async deleteAppraiseTag(id) {
      const { status, msg } = await this.$http.order.tagApi.deleteAppraiseTag(id)
      if (status === 200) {
        this.$message.success('已删除')
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getAppraiseTagList()
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>
